<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style="width:100%;height:600px;float:left; padding:10px 0;">
    <div id="myChart" style="width:85%;height:100%;margin:0 auto;"></div>
  </div>
</template>
<script>
import { viewActiviti } from "@/api/system/activiti_main";
export default {
  name: "viewActiviti",
  data () {
    return {
      data_result:[],
      link_result:[],
      type:""
    }
  },
  created()  {
    this.getInitEcharts();
  },
  methods:{
    getInitEcharts(){
      //拼接返回字符串
      let activitiId = this.$route.query.id;
      viewActiviti(activitiId).then(response => {
        // 将数据转换成Echarts可识别数据类型
        this.data_result=eval('('+response.data_result+')');
        this.link_result=eval('('+response.link_result+')');
        this.type=response.type;
        this.getEcharts();
      });
    },
    //加载echarts图
    getEcharts(){
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.type+'图',
          align:'center'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 60,
            roam: true,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: this.data_result,
            // links: [],
            links: this.link_result,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      });
    }
  }
};
</script>
